<template>
  <div class="location-main">
    <div class="title" @click="expand = !expand">
      <img :src="icons.locationIcon" class="location-icon">
      <div class="text" v-text="locationContent" />
      <img :src="icons.expandIcon" :class="expand ? 'expand' : 'fold'">
    </div>
    <el-collapse-transition>
      <div class="content" v-if="expand">
        <div class="searchC">
          <el-input v-model="content" placeholder="搜索" class="input-container" />
          <img :src="icon.closeIcon" class="filter" title="清空搜索内容" @click="content = ''">
        </div>
        <div class="searchResultList" v-if="areaSearchList && areaSearchList.length > 0">
          <div class="sitem" v-for="item in areaSearchList" :key="item.id">
            <p @click="selectArea(item)">{{ item.name }}</p>
          </div>
        </div>
        <div class="treeContent" v-if="areaSearchList && areaSearchList.length === 0">

          <el-tree
            :data="areaList"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
            node-key="id"
            :default-expanded-keys="currentNodeKeys"
          >
            <template #default="{ node }">
              <span class="custom-tree-node">
                <img src="../../assets/dialog/location_front.png" style="width: 12px; height: 12px">
                {{ node.label }}
              </span>
            </template>
          </el-tree>

        </div>

      </div>
    </el-collapse-transition>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref, watch } from 'vue'
import locationIcon from '../../assets/dialog/location_icon.png'
import expandIcon from '../../assets/dialog/location_expand.png'
import { ElCollapseTransition, ElInput, ElTree } from 'element-plus'
import closeIcon from '../../assets/dialog/search_close.png'
import { useStore } from '@/store'
const icon = reactive({ closeIcon })
const emit = defineEmits(['handleAreaSelect'])
const store = useStore()
const areaList = store.getters.getAreaList // 获取行政区划列表
const areaListData = store.state.areaList // 一维行政区划数组
const areaSearchList = ref([] as any)
const maxAreaNode = ref(areaList[0].id)
const currentNodeKeys = ref([maxAreaNode.value]) // 当前展开节点
const icons = reactive({
  locationIcon: locationIcon,
  expandIcon: expandIcon
})
const locationContent = ref('') // title显示内容
locationContent.value = areaList[0].name
const expand = ref(false)
const content = ref('')
const defaultProps = {
  children: 'children',
  label: 'label'
}
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
// const locationData: Tree[] = [{
//   id: 1,
//   label: '合肥市',
//   children: [{
//     id: 2,
//     label: '经开区'
//   }, {
//     id: 3,
//     label: '庐阳区',
//     children: [{
//       id: 4,
//       label: '三牌楼街道',
//       children: [{
//         id: 5,
//         label: 'XXX'
//       },
//       {
//         id: 6,
//         label: 'XXX'
//       },
//       {
//         id: 7,
//         label: 'XXX'
//       }]
//     }, {
//       id: 8,
//       label: '县桥街道',
//       children: [{
//         id: 9,
//         label: 'XXX'
//       },
//       {
//         id: 10,
//         label: 'XXX'
//       },
//       {
//         id: 11,
//         label: 'XXX'
//       }]
//     }, {
//       id: 12,
//       label: '逍遥津街道',
//       children: [{
//         id: 13,
//         label: 'XXX'
//       },
//       {
//         id: 14,
//         label: 'XXX'
//       },
//       {
//         id: 15,
//         label: 'XXX'
//       }]
//     }, {
//       id: 16,
//       label: '杏花镇',
//       children: [{
//         id: 17,
//         label: 'XXX'
//       },
//       {
//         id: 18,
//         label: 'XXX'
//       },
//       {
//         id: 19,
//         label: 'XXX'
//       }]
//     }, {
//       id: 20,
//       label: '三十岗乡',
//       children: [{
//         id: 21,
//         label: 'XXX'
//       },
//       {
//         id: 22,
//         label: 'XXX'
//       },
//       {
//         id: 23,
//         label: 'XXX'
//       }]
//     }, {
//       id: 24,
//       label: '三牌楼街道',
//       children: [{
//         id: 25,
//         label: 'XXX'
//       },
//       {
//         id: 26,
//         label: 'XXX'
//       },
//       {
//         id: 27,
//         label: 'XXX'
//       }]
//     }]

//   }]

// }]
// console.log(locationData)
// 监听搜索框输入内容
watch(content, () => {
  areaSearchList.value = []
  if (content.value === '') {
    return
  }
  areaListData.forEach((item: any) => {
    if (item.name && item.name.indexOf(content.value) > -1) {
      areaSearchList.value.push(item)
    }
  })
})
const handleNodeClick = (data: Tree) => {
  locationContent.value = data.label || ''
  emit('handleAreaSelect', data)
}
// 点击搜索结果
const selectArea = (item: any) => {
  locationContent.value = item.name || ''
  content.value = ''
  item.label = item.name
  item.value = item.code
  nextTick(() => {
    currentNodeKeys.value = []
    currentNodeKeys.value.push(item.id)
  })
  emit('handleAreaSelect', item)
}
</script>
<style lang="scss" scoped>
.location-main {
  width: 200px;
  // display: flex;
  // flex-direction: column;

  .title {
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    background-color: #242D3A;
    border-radius: 8px;
    align-items: center;
    user-select: none;
    cursor: pointer;

    .location-icon {
      width: 16px;
      height: 16px;
    }

    .text {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      text-align: center;
      color: #FFFFFF;
      text-align: center;
    }

    .expand {
      transform: rotate(-180deg);
    }

  }

  .content {
    width: 100%;
    height: auto;
    background-color: #1F2935;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
    user-select: none;

    .searchC {
      display: flex;
      position: relative;
    }

    .filter {
      position: absolute;
      width: 16px;
      height: 16px;
      margin-left: 8px;
      right: 0.2rem;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .searchResultList {
      color: #FFFFFF;
      ;
      max-height: 8rem;
      overflow-y: auto;

      .sitem {
        padding: 4px;

        p {
          cursor: pointer;
        }
      }
    }

    .treeContent {

      max-height: 8rem;
      overflow-y: auto;
    }

    &:deep(.el-input) {
      --el-input-bg-color: #161D26;

      .el-input__wrapper {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;

        .el-input__inner {
          cursor: default !important;
        }
      }
    }

    .city {
      display: flex;
      flex-direction: row;
      margin-top: 10px;

      .text {
        color: #FFFFFF;
      }
    }
  }
}
</style>
